<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <title>宽带开户-填写订单</title>
    <link rel="stylesheet" href="../../template/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../../template/website/css/app.css"/>
    <style>
        .am-text-center-group {
            padding-top: 1rem;
            height: 3rem;
        }
    </style>
</head>
<body>
    <div class="am-g am-g-collapse am-margin-top-sm am-input-group-label am-text-default">
        <div class="am-u-sm-12 am-text-center am-padding-xs">基本信息</div>
    </div>

    <div class="am-g am-g-collapse am-padding-horizontal-sm am-text-sm  am-padding-top">
        <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
            <span class="am-text-danger">*</span>
            联系人：
        </div>
        <div class="am-u-sm-9 am-u-md-10">
            <input type="hidden" id="customer_name" maxlength="10" readonly />
            <input class="am-form-field am-text-sm" type="text" id="customer_name_display" placeholder="请输入客户姓名" maxlength="10" readonly />
        </div>
    </div>

    <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
        <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
            <span class="am-text-danger">*</span>
            联系电话：
        </div>
        <div class="am-u-sm-5 am-u-md-9">
            <input class="am-form-field am-text-sm" type="text" id="customer_phone" maxlength="11" required
               placeholder="请输入办理电话"/>
        </div>
        <div class="am-u-sm-4 am-u-md-1 am-text-right">
            <input class="am-btn am-btn-primary am-text-sm" style="width:90%" type="button" id="send_sms_btn" value="获取验证码"/>
        </div>
    </div>

    <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
        <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
            <span class="am-text-danger">*</span>
            验证码：
        </div>
        <div class="am-u-sm-5 am-u-md-9">
            <input class="am-form-field am-text-sm" type="text" id="verify_code" maxlength="11" required
               placeholder="请输入短信验证码"/>
        </div>
        <div class="am-u-sm-4 am-u-md-1 am-text-right">
            <input class="am-btn am-btn-primary am-text-sm" style="width:90%" type="button" id="verify_sms_btn" value="校    验"/>
        </div>
    </div>

    <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
        <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
            <span class="am-text-danger">*</span>
            地市：
        </div>
        <div class="am-u-sm-9 am-u-md-10">
            <select data-am-selected="{btnWidth:'100%',btnSize: 'sm',maxHeight: '100px', searchBox: 1}" id="city" disabled>
                <option value="" selected></option>
            </select>
        </div>
    </div>

    <div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
        <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
            <span class="am-text-danger">*</span>
            区县：
        </div>
        <!--<div class="am-u-sm-9 am-u-md-10">
        <select data-am-selected="{btnWidth:'100%',btnSize: 'sm',maxHeight: 300,searchBox: 1}" id="county_town"
                name="rmdHour"></select>
    </div>
    -->
    <div class="am-u-sm-9 am-u-md-10">
        <div class="am-cf style-border">
            <select data-am-selected="{btnWidth:'100%',btnSize: 'sm',maxHeight: '180px',searchBox: 1}" id="county_town" name="rmdHour"></select>
            <script type="text/x-handlebars-template" id="county_town_tpl">
                {{#if list}}
                {{#each list}}
                <option value="{{code}}|{{company}}">{{name}}</option>
                {{/each}}
                {{/if}}
            </script>
        </div>
    </div>
</div>

<div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
        <span class="am-text-danger">*</span>
        装机地址：
    </div>
    <div class="am-u-sm-9 am-u-md-10">
        <div class="am-input-group">
            <input class="am-form-field am-text-sm" type="text" maxlength="200" id="address" required placeholder="点击选择装机地址" readonly/>
            <span class="am-input-group-btn">
                <button class="am-btn am-btn-default" type="button" id="address_undo_btn">
                    <span class="am-icon-undo"></span>
                </button>
            </span>
        </div>
        <!-- <input class="am-form-field am-text-sm" type="text" maxlength="200" id="address" required placeholder="点击选择装机地址" readonly/>
        -->
    </div>
</div>
<div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-2 am-padding-xs"></div>
    <div class="am-u-sm-9 am-u-md-10">
        <span class="am-text-sm" id="address_selected"></span>
    </div>
</div>

<div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
        <span class="am-text-danger">*</span>
        详细地址：
    </div>
    <div class="am-u-sm-9 am-u-md-10">
        <!-- <input class="am-form-field am-text-sm" type="text" maxlength="200" id="address_detail" required placeholder="点击编辑详细地址" readonly/> -->
        <textarea class="am-text-sm" id="address_detail" maxlength="200" rows="2" style="width:100%;resize:none;" readonly="" placeholder="请输入详细地址"></textarea>
    </div>
</div>

<div class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">
    <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
        <span class="am-text-danger">&nbsp;</span>
        接入方式：
    </div>
    <div class="am-u-sm-9 am-u-md-10 am-padding-xs">
        <span class="am-text-sm" id="access_type"></span>
    </div>
</div>

<div id="expected-install-time" class="am-g am-g-collapse am-padding-horizontal-sm am-margin-top-sm am-text-sm">

    <div class="am-u-sm-3 am-u-md-2 am-padding-xs">
        <span style="color: red;">*</span>
        安装时间：
    </div>
    <div class="am-u-sm-9 am-u-md-10">
        <input type="date" id="install_time" class="am-form-field am-text-sm" placeholder="请输入期望安装时间"/>
    </div>
</div>

<!--底部分隔-->
<div class="am-g am-margin-vertical-sm" id="change-height-div"></div>

<div class="am-g am-topbar am-topbar-fixed-bottom">
    <div class="am-u-sm-8 am-text-sm am-margin-top-xs am-padding-top-sm">
        已选择:
        <span class="am-text-primary" id="broadband_name"></span>
        <input id="broadband_id" type="hidden"/>
    </div>
    <div id="submit_btn" class="am-u-sm-4  am-text-center am-btn-default" style="padding: 1.2rem 0" disabled>订购</div>
</div>

<!--提示信息模态框-->
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="modal">
    <div class="am-modal-dialog">
        <div class="am-modal-hd" id="modal-info">加载中...</div>
        <div class="am-modal-bd">
            <span class="am-icon-spinner am-icon-spin"></span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="address-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">
            <div class="am-input-group">
                <input class="am-form-field am-text-sm" type="text" maxlength="200" id="address_keyword" required placeholder="请输入查询地址" value=""/>
                <span class="am-input-group-btn">
                    <button class="am-btn am-btn-default am-text-sm" type="button" id="query-address-btn">
                        <span class="am-icon-find">搜索</span>
                    </button>
                </span>
            </div>
        </div>
        <div id="address-list-div" class="am-modal-bd" style="height:180px; overflow:auto;overflow-x:hidden;">
            <ul class="am-list am-list-static am-list-border" id="address-list">
                <script type="text/x-handlebars-template" id="amz-address-list">
           {{#if addressList}}
            {{#addressList}}
            <li class="am-g am-text-xs">
                <input type="hidden" name="accessType" value="{{EnterType}}"/>
                <input type="hidden" name="buildaddresId" value="{{AddressId}}"/>
                <input type="hidden" name="netAttr" value="{{NetAttr}}"/>
                <input type="hidden" name="areaCode" value="{{AreaCode}}"/>
                <input type="hidden" name="areaName" value="{{AreaName}}"/>
                <input type="hidden" name="areaAddress" value="{{AddressName}}"/>
                <input type="hidden" name="bandWidth" value="{{BandWidth}}"/>
                <input type="hidden" name="workFlag" value="{{WorkFlag}}"/>
                <div class="' + options.hash.class + ' am-text-left" name="address">{{AddressName}}</div>              
            </li>
           {{/addressList}}                      
          {{/if}}          
          </script>
            </ul>
            <div id="error-msg" class="am-text-center am-text-xs am-text-danger am-hide">{{error}}</div>
            <div class="am-u-sm-12 am-hide am-text-center am-text-xs" id="loadingAddress"> <i class="am-icon-spinner am-icon-spin"></i>
                加载中，请稍候……
            </div>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn am-text-xs">确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="bd-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">宽带开户</div>
        <div class="am-modal-bd" id="bd-alert-content"> </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="bd-address-detail-modal">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">详细地址</div>
        <div class="am-modal-bd"> <textarea class="am-text-sm" id="bd-alert-address-detail" maxlength="200" rows="4" style="width:100%;resize:none;"></textarea></div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="bd-address-detail-save-btn">确定</span>
        </div>
    </div>
</div>

<script type="text/x-handlebars-template" id="address-tpl">
    {{#addressList list class="am-text-truncate"}}{{/addressList}}
</script>

<script type="text/javascript" src="../../template/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../../template/assets/js/amazeui.min.js"></script>
<script type="text/javascript" src="../../template/assets/js/handlebars.min.js"></script>
<script type="text/javascript" src="../../template/assets/js/amazeui.widgets.helper.min.js"></script>
<script type="text/javascript" src="../../template/website/js/app.js"></script>
<link rel="stylesheet" href="../../template/common/css/datetimepicker/amazeui.datetimepicker.css"/>
<script type="text/javascript" src="../../template/common/js/datetimepicker/amazeui.datetimepicker.js"></script>
<script type="text/javascript" src="../../template/common/js/datetimepicker/locales/amazeui.datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script type="text/javascript" src="../../template/common/js/jquery.cookie.js"></script>
<script type="text/javascript" src="../../template/website/js/campus/broadband.create-order.js"></script>
<link rel="stylesheet" href="../../template/assets/css/font-awesome.css"></body>
</html>